<template>
<table>
    <tr>
        <td>会员等级</td>
        <td>
            <select v-model="info.Rank_Id">
                <option :value="0">--请选择--</option>
                <option v-for="item in rights" :value="item.Rank_Id">{{ item.Rank_Name }}</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>会员权益</td>
        <td>
            <select v-model="info.MR_Id">
                <option :value="0">--请选择--</option>
                <option v-for="item in Rank" :value="item.MR_Id">{{ item.MR_Name }}</option>
            </select>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="button" value="保存" class="btn btn-success" @click="AddRankRights"/>
        </td>
    </tr>
</table>

</template>
<script setup lang="ts">
import axios from 'axios';
import { onMounted,ref } from 'vue';

//创建响应式数据保存会员权益
const Rank=ref([{
    "MR_Id": -1,
    "MR_Name": "",
}])
//创建响应式数据保存会员等级
const rights=ref([{
    "Rank_Id": 0,
    "Rank_Name": "string",
}])
//创建响应式数据保存等级权益
const info=ref({
    "MR_Id": 0,
    "Rank_Id": 0,
})
//加载会员权益
const LoadRank=()=>{
    axios.get("https://localhost:7035/api/Member/ShowMemberrightInfo")
    .then(res=>{
        Rank.value=res.data
    })
}
//加载会员等级
const LoadRights=()=>{
    axios.get("https://localhost:7035/api/Member/GetRanks")
    .then(res=>{
        rights.value=res.data
    })
}
onMounted(()=>{
    LoadRank();
    LoadRights();
})
//保存添加
const AddRankRights=()=>{
    if(info.value.Rank_Id==0){
        alert('请选择会员等级')
        return;
    }
    if(info.value.MR_Id==0){
        alert('请选择会员权益')
        return;
    }
    axios.post("https://localhost:7035/api/Member/AddRankRights",info.value)
    .then(res=>{
        if(res.data>0)
        {
            alert('添加成功')
        }
        else
        {
            alert('添加失败')
        }
    })
}

</script>